<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ pgTitle }}
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <p>维修服务现场记录单</p>
      <div class="header" :data="tableData_Xu" >
        <ul>
          <li>
            <span>维修服务日期 :</span>
            <el-date-picker style="width: 50%;" v-model="tableData_Xu.maintainTime" type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd" disabled></el-date-picker>
          </li>
          <li>
            <span>维修服务站 :</span>
            <el-input style="width: 50%;" v-model="tableData_Xu.fuwuzhan" disabled></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>客户单位</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.clientUnits" disabled></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.clientName" disabled></el-input>
          </li>
          <li>
            <span>联系方式（区号）</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.clientPhone" disabled></el-input>
          </li>
          <li>
            <span>联系地址</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.clientAdress" disabled></el-input>
          </li>
          <li>
            <span>车辆品牌/车型</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.carType" disabled></el-input>
          </li>
          <li>
            <span>车牌号</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.carNumber" disabled></el-input>
          </li>
          <li>
            <span>服务站主管</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.siteLingdao" disabled></el-input>
          </li>
          <li>
            <span>服务人员</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.fuwurenyuan" disabled></el-input>
          </li>
          <li>
            <span>电话</span>
            <el-input style="width: 70%;" v-model="tableData_Xu.fuwurenyuanPhone" disabled></el-input>
          </li>
        </ul>
      </div>
      <div class="intermediate" :data="tableData_Xu">
        <ul>
          <li>
            <span>
              出厂编号
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.chuchangbianhao" disabled></el-input>
          </li>
          <li>
            <span>
              保修卡号
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.baoxiukahao" disabled></el-input>
          </li>
          <li>
            <span>
              购车日期
            </span>
            <el-date-picker style="width: 70%;" v-model="tableData_Xu.goucheTime" type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd" disabled></el-date-picker>
          </li>
          <li>
            <span>
              压缩机号
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.yasuojihao" disabled></el-input>
          </li>
          <li>
            <span>
              行驶里程
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.xingshilicheng" disabled></el-input>
          </li>
          <li>
            <span>
              三包日
            </span>
            <el-input style="width: 70%;" value="是" disabled></el-input>
          </li>
          <li>
            <span>
              底盘号
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.dipanhao" disabled></el-input>
          </li>
          <li>
            <span>
              发动机号
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.fadongjihao" disabled></el-input>
          </li>
          <li>
            <span>
              行驶证登记日期
            </span>
            <el-date-picker style="width: 70%;" v-model="tableData_Xu.xingshizhengTime" type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd" disabled></el-date-picker>
          </li>
          <li>
            <span>
              车辆用途
            </span>
            <el-input style="width: 70%;" v-model="tableData_Xu.cheliangyongtu" disabled></el-input>
          </li>
        </ul>
      </div>
      <div class="footer">
        <div class="footer-left">
          <template>
            <el-table
              :data="tableData_XU_list"
              style="width: 100%">
              <el-table-column
                prop="productName"
                label="零件名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="productTuhao"
                label="零件图号"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="number"
                label="数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="danjia"
                label="单价（元）"
                align="center">
              </el-table-column>
              <el-table-column
                prop="guanlif"
                label="管理费（元）"
                align="center">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
    <!--底部按钮-->
    <div class="bottom">
      <el-button type="primary" size="medium" @click="tongguo()" v-if="statue == '1' || statue=='false'">确定
      </el-button>
      <el-button size="medium" @click="dialogVisible = true" v-if="statue == '1' || statue=='false'">驳回</el-button>
      <el-button type="info" size="medium" @click="revert()" v-if="statue == '2' ||statue=='true'">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false">
      <span>驳回理由 : </span>
      <el-input style="width: 80%" v-model="bohui" placeholder="请输入驳回理由"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false ,getbo()">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";

export default {


  data() {
    return {
      textarea: "",
      tableData_Xu: {}, //
      pgTitle: "产品详情",
      dialogVisible: false,
      bohui: "",
      statue: "1",
      tableData_XU_list:[],
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName = JSON.parse(localStorage.getItem("message")).Name;
    this.statue = this.$route.query.statue;
    this.shengheMessageId = this.$route.query.id
    this.checkFlowId = this.$route.query.checkFolwId
    console.log(this.userId, this.shengheMessageId)
    if (this.statue == "2" || this.statue == "true") {
      this.pgTitle = "产品详情";
    } else if (this.statue == "1" || this.statue == "false") {
      this.pgTitle = "产品审核";
    }
    this.getList()
  },
  methods: {
    getList(id) {
      axios
      (
        "/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + this.shengheMessageId + "&&checkFlowId=" + this.checkFlowId
      )
        .then((res) => {
          const resadd = res.data.data.pojo
          this.tableData_Xu = resadd
          this.tableData_XU_list = resadd.useparts
          console.log(resadd, 11111111111111111111)
        });
    },
    formatTime(data) {
      return data == null ? "" : data.substring(0, 10);
    },
    //通过
    tongguo() {
      const arr = {
        "bohui": "",
        "checkFolwId": this.$route.query.checkFolwId,
        "shengheMessageId": this.$route.query.id,
        "status": 3,
        "userId": this.userId,
        "userName": this.userName
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },

    // 驳回函数
    getbo() {
      if (this.bohui == "") {
        this.$message.error("驳回理由不能为空！");
        return;
      }
      const arr = {
        "bohui": this.bohui,
        "checkFolwId": this.$route.query.checkFolwId,
        "shengheMessageId": this.$route.query.id,
        "status": 2,
        "userId": this.userId,
        "userName": this.userName,
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;

  p {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    margin: auto;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .intermediate {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    margin: auto;
    padding-bottom: 20px;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 25%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .intermediate-two {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin: auto;
    padding-bottom: 20px;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {

        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        div {
          margin-top: 5px;
        }

        span {
          display: inline-block;
          width: 25%;
        }

        //.el-input-two{
        //  margin-top: 10px;
        //  margin-left: 74px;
        ////}

      }

      .el-input-center {
        display: flex;
        align-items: center;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    width: 98%;
    margin: auto;
    //height:400px;
    padding-top: 20px;
    padding-bottom: 20px;
    .footer-left {
      width: 98%;

      /deep/ .is-leaf {
        text-align: center;
        background: #ffffff;

      }


    }

  }
}

.bottom {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  position: relative;

  p {
    width: 20%;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
